<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>History - AI French Teacher</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/french-theme.css') }}">
</head>
<body>
    <div class="container">

        <header>
            <div class="site-logo">
                <span class="eiffel-tower">🗼</span>
                <h1 class="app-title">AI French Teacher</h1>
            </div>
            <div class="french-flag-bar"></div>
            <nav>
                <a href="/">🎤 录音翻译</a>
                <a href="/vocabulary">📚 单词本</a>
                <a href="/history" class="active">📜 历史记录</a>
                {% if user and user.role == 'admin' %}
                <a href="/admin">🔐 管理面板</a>
                {% endif %}
                <a href="#" onclick="handleLogout()" style="color: #EF4135;">🚪 登出</a>
            </nav>
            <div style="text-align: right; font-size: 14px; color: #666; margin-top: 10px;">
                👤 {{ user.username if user else '未登录' }}
            </div>
        </header>


        <main>
            <h2>📜 翻译历史记录</h2>


            <div class="stats-cards" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 20px;">
                <div class="stat-card" style="background: linear-gradient(135deg, #4A90E2, #357ABD);">
                    <div class="stat-number" id="totalRecords">0</div>
                    <div class="stat-label">总记录数</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #50C878, #45B369);">
                    <div class="stat-number" id="totalXunfei">0</div>
                    <div class="stat-label">讯飞API（字符）</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #967BB6, #8B5A9C);">
                    <div class="stat-number" id="totalQwen">0</div>
                    <div class="stat-label">通义千问（tokens）</div>
                </div>
            </div>


            <div class="history-list" id="historyList">
                <p class="text-center">加载中...</p>
            </div>
        </main>


        <footer>
            <p>AI French Teacher v3.0 | 2025</p>
            <p style="margin-top: 10px;">
                <a href="/credits" style="color: var(--french-blue); text-decoration: none; font-weight: 600;">
                    ⚜️ 致谢 / Remerciements
                </a>
            </p>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/history.js') }}"></script>
</body>
</html>

